<template>
  <a-card :bordered="false">
    <detail-list title="基本信息">
      <a-divider style="margin-bottom: 32px"/>

      <detail-list-item term="订单商品名">{{model.orderSubject}}</detail-list-item>

      <detail-list-item term="第三方的流水号">{{model.tradeNo}}</detail-list-item>

      <detail-list-item term="支付金额">{{model.price / 100}}</detail-list-item>

      <detail-list-item term="支付渠道">
        <span v-if="payChannel == 100">微信支付</span>
<!--        <span v-else-if="payChannel == 101">微信 JS API 支付</span>-->
        <span v-else-if="payChannel == 200">支付宝支付</span>
<!--        <span v-else-if="payChannel == 9999">ping++ 支付</span>-->
      </detail-list-item>

      <detail-list-item term="订单状态">
        <span v-if="transactionStatus == 1">等待支付</span>
        <span v-else-if="transactionStatus == 2">支付成功</span>
        <span v-else-if="transactionStatus == 3">取消支付</span>
      </detail-list-item>

<!--      <detail-list-item term="订单商品描述">{{model.orderDescription}}</detail-list-item>-->

      <detail-list-item term="订单备注">{{model.orderMemo}}</detail-list-item>

      <detail-list-item term="交易过期时间">{{model.expireTime}}</detail-list-item>

      <detail-list-item term="完成时间">{{model.finishTime}}</detail-list-item>

<!--      <detail-list-item term="支付成功的时间">{{model.paymentTime}}</detail-list-item>-->

<!--      <detail-list-item term="收到第三方系统通知的时间">{{model.notifyTime}}</detail-list-item>-->

    </detail-list>
  </a-card>
</template>

<script>
  import PageLayout from '@/components/page/PageLayout'
  import STable from '@/components/table/'
  import DetailList from '@/components/tools/DetailList'
  import ABadge from "ant-design-vue/es/badge/Badge"
  import { getAction } from '@/api/manage'
  const DetailListItem = DetailList.Item
  export default {
    components: {
      PageLayout,
      ABadge,
      DetailList,
      DetailListItem,
      STable
    },
    data () {
      return {
        payChannel:{},
        transactionStatus:{},
        model:{},
      }
    },
    created(){
      this.getTransactionDetails(this.$route.query.record.id);
    },
    mounted(){
    },
    activated(){
      this.getTransactionDetails(this.$route.query.record.id);
    },
    methods:{
      getTransactionDetails(ids) {
        let toParams = {id:ids};
        this.$nextTick(function () {
          getAction("/admins/transaction/get",toParams )
            .then(res => {
              if (res.success) {
                this.model = res.data[0]
                this.transactionStatus = this.model.status
                this.payChannel = this.model.payChannel
               }
            })
            .catch(err => {
            });
        })
      },
      //关闭标签
      closeTab(){
        this.$router.back()
      },
    },
    computed: {
      title () {
        return this.$route.meta.title
      }
    },

  }
</script>

<style lang="scss" scoped>
  .title {
    color: rgba(0,0,0,.85);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
  }
  .examples {
    text-align: center;
  }
</style>